<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    #div1 {
        width: 100%;
        /*margin: 30px auto;*/
        border: 1px solid red;
        overflow: hidden;
    }

    li {
        width: 100%;
        height: 500px;
        float: left;
        list-style: none;
        margin-bottom: 10px;
        background: url('img/loading.gif') center center no-repeat;
        border: 1px dashed green;
    }
    img{
        width:100%;
        height: 500px;
    }
</style>
<body>
<div id="div1">
    <ul>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140710/1-140G0161612.jpg"></li>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33R6.jpg"></li>
        <li data-src="http://4493bz.1985t.com/uploads/allimg/140628/1-14062Q33242.jpg"></li>
        <li data-src="http://img.bizhi.sogou.com/images/2014/12/10/997251.jpg"></li>
        <li data-src="http://dl.bizhi.sogou.com/images/2014/12/02/986640.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170473_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170475_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170477_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
        <li data-src="http://imgstore.cdn.sogou.com/app/a/100540002/1170479_s_90_2_219x160.jpg"></li>
    </ul>
</div>
</body>
<script>
    window.onload = function () {
        window.onscroll();
    };
    window.onscroll = function () {
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.children[0];
        var aLi = oUl.children;

        for (var i = 0, l = aLi.length; i < l; i++) {
            var oLi = aLi[i];
            //检查oLi是否在可视区域
            var t = document.documentElement.clientHeight + (document.documentElement.scrollTop || document.body.scrollTop);
            var h = getH(oLi);
            if (h < t) {
                setTimeout("setImg(" + i + ")", 500);
            }
        }
    };
    function getH(obj) {
        var h = 0;
        while (obj) {
            h += obj.offsetTop;
            obj = obj.offsetParent;
        }
        return h;
    }
    function setImg(index){
        var oDiv=document.getElementById("div1");
        var oUl=oDiv.children[0];
        var aLi=oUl.children;
        if (aLi[index].dataset) {
            var src=aLi[index].dataset.src;
        } else{
            var src=aLi[index].getAttribute('data-src');
        }
        var oImg=document.createElement('img');
        oImg.src=src;
        if (aLi[index].children.length==0) {
            aLi[index].appendChild(oImg);
        }
    }

</script>
</html>